<template>
  <el-dialog
    v-model="drawerVisible"
    :destroy-on-close="true"
    :title="`${drawerProps.title}组织`"
    width="74%"
    top="10vh"
    draggable
    custom-class="user-info-dialog"
  >
    <el-form
      ref="ruleFormRef"
      label-width="150px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
      label-position="top"
      class="info-form"
      v-if="drawerProps?.isMove"
    >
      <el-form-item label="上级部门" prop="parentId">
        <el-cascader
          v-model="drawerProps.row!.parentId"
          :options="drawerProps.tableData"
          :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'departmentModels' }"
          clearable
        />
      </el-form-item>
    </el-form>
    <el-form
      v-else
      ref="ruleFormRef"
      label-width="150px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
      label-position="top"
      class="info-form"
    >
      <!-- <el-form-item label="上级部门" prop="parentId" type="hidden">
        <el-input disabled v-model="drawerProps.row!.parentId" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="drawerProps.row!.name" placeholder="请填写部门名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="drawerProps.row!.sort" placeholder="请填写排序" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="drawerProps.row!.remark" placeholder="请填写备注" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item v-show="drawerProps.isView" label="修改人" prop="modifiedBy">
        <el-input v-model="drawerProps.row!.modifiedBy" placeholder="请填写备注" clearable></el-input>
      </el-form-item>
      <el-form-item v-show="drawerProps.isView" label="修改时间" prop="gmtModified">
        <el-input v-model="drawerProps.row!.gmtModified" placeholder="" clearable></el-input>
      </el-form-item>
      <el-form-item v-show="drawerProps.isView" label="创建人" prop="createBy">
        <el-input v-model="drawerProps.row!.createBy" placeholder="" clearable></el-input>
      </el-form-item>
      <el-form-item v-show="drawerProps.isView" label="创建时间" prop="gmtCreate">
        <el-input v-model="drawerProps.row!.gmtCreate" placeholder="" clearable></el-input>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="MenDrawer">
import { ref, reactive } from "vue";
// import { genderType } from "@/utils/serviceDict";
import { ElMessage, FormInstance } from "element-plus";
import { Menu } from "@/api/interface";

//import UploadImg from "@/components/Upload/Img.vue";
// import UploadImgs from "@/components/Upload/Imgs.vue";
const rules = reactive({
  name: [{ required: true, message: "请填写名称" }]
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Menu.ResMenuList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
  type?: number;
  menuList?: Array<T>;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {},
  type: 0,
  menuList: []
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerProps.value.tableData = [
    {
      name: "公司",
      id: 0,
      parentId: "",
      departmentModels: drawerProps.value.tableData
    }
  ];
  drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = async () => {
  if (drawerProps.value?.isMove) {
    try {
      await drawerProps.value.api!({
        parentId: drawerProps.value.row!.parentId.pop(),
        departmentId: drawerProps.value.row!.id
      });
      ElMessage.success({ message: `${drawerProps.value.title}组织成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  } else {
    ruleFormRef.value!.validate(async valid => {
      if (!valid) return;
      try {
        let params = JSON.parse(JSON.stringify(drawerProps.value.row));
        if (params.children) {
          delete params.children;
        }
        params.companyId = drawerProps.value?.companyId;
        await drawerProps.value.api!(params);
        ElMessage.success({ message: `${drawerProps.value.title}组织成功！` });
        drawerProps.value.getTableList!();
        drawerVisible.value = false;
      } catch (error) {
        console.log(error);
      }
    });
  }
};

defineExpose({
  acceptParams
});
</script>
<style lang="scss">
:deep(.user-info-dialog) {
  display: flex;
  height: 600px;
}
.info-container {
  height: 580px;
}
.info-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 30px;
  .el-select,
  .el-cascader,
  .el-date-editor {
    width: 100%;
  }
}
</style>
